<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级主页',
	},
}
</route>

<template>
	<view class="page-class">
		<fly-navbar leftText="班级主页" fixed />
		<block v-if="userInfo.class_list && userInfo.class_list.length > 0">
			<view class="w-full px-4 mb-6 mt-6 box-border class-topBox">
				<view class="class_tabBox">
					<view class="class_tabBox_a class_tabBox_aHov font-bold">{{ gradeClass }}</view>
					<!-- <view class="class_tabBox_a">雏鹰</view> -->
					<view class="class_rightBox" @tap="openSpecs">
						<image :src="baseImg + '/addClass.png'" mode="scaleToFill" />
						<text>班级</text>
					</view>
				</view>
				<view class="class_swiperBox">
					<swiper
						style="height: 324rpx"
						class="swiper"
						circular
						:indicator-dots="true"
						:autoplay="false"
						:interval="2000"
						:duration="500"
						@change="classChange"
					>
						<swiper-item v-for="(item, index) in userInfo.class_list" :key="index">
							<view
								class="class-card w-full px-4 pt-6 pb-3 box-border rounded-[30rpx]"
								style="border-top-left-radius: 0"
							>
								<view class="flex justify-between items-center">
									<view class="flex justify-between items-center">
										<image
											class="w-[105rpx] h-[105rpx] rounded-[50%] mr-1"
											style="border: #f7ce32 4rpx solid"
											:src="baseImg + '/class.png'"
										></image>
										<view class="flex flex-col" style="width: 400rpx; overflow: hidden">
											<text
												class="text-[#303030] text-[29rpx] font-bold"
												style="
													width: 400rpx;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;
												"
												>{{ item.class_name }}</text
											>
											<view
												class="mt-1"
												style="
													width: 400rpx;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;
												"
											>
												<text class="text-[#919191] text-[25rpx]">{{ userInfo.school_name }}</text>
											</view>
										</view>
									</view>
									<view class="" @tap="openSpecs1">
										<image
											:src="baseImg + '/classSetUp.png'"
											class="class-student"
											style="background-color: transparent"
										></image>
									</view>
								</view>
								<view
									class="w-full flex justify-between items-center rounded-[30rpx] px-4 py-1 mt-4 box-border student-process"
									@tap="toRoster"
								>
									<text class="text-[#34A4E2] text-[25rpx]"
										>{{ classInfo && classInfo.student_total }}学生</text
									>
									<view class="flex items-center">
										<image
											:src="
												item.avatar ||
												'https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/student4.png'
											"
											class="class-student"
											v-if="classInfo && classInfo.student_top.length > 0"
											v-for="(item, index) in classInfo.student_top.slice(0, 6)"
										></image>
										<image :src="baseImg + '/class-right.png'" class="w-[20rpx] h-[20rpx]"></image>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="w-full px-4 mb-6 box-border" v-if="classInfo && classInfo.plan_list.length > 0">
				<view class="w-full flex justify-between items-center">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<text class="text-[#474747] text-[28rpx] ml-2 font-bold">班级共读计划</text>
					</view>
					<view class="items-back" @tap="toUrl('/pages-user/together-record/index?type=2')">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class-right.png'"></image>
					</view>
				</view>

				<view
					index="94"
					class="container2"
					v-for="(item, index) in classInfo.plan_list"
					@tap="
						toUrl(
							'/pages/pages-readingPlan/readingPlan-studentDetails/index?plan_id=' + item.plan_id,
						)
					"
				>
					<view class="wrapper1">
						<text index="92" class="title2 font-bold">{{ item.title }}</text>
						<view class="group1">
							<view
								index="72"
								:class="item.origin == '班级计划' ? 'captionWrapper1' : 'captionWrapper'"
							>
								<text index="71" class="caption">{{ item.origin }}</text>
							</view>
							<text index="91" class="caption1">{{
								dayjs(item.start_time * 1000).format('YYYY年MM月DD日') +
								' - ' +
								dayjs(item.end_time * 1000).format('YYYY年MM月DD日')
							}}</text>
						</view>
						<view class="group1">
							<text index="10" class="title7">{{ item.join_total }}人参与</text>
							<text index="10" class="title7" style="margin-left: 10rpx; color: #999"
								>{{ item.no_join_total }}人未参与</text
							>
							<text index="10" class="title7" style="margin-left: 10rpx; color: #6ed278"
								>{{ item.complete_total }}人完成</text
							>
						</view>
					</view>
					<view index="93" class="wrapper2">
						<text index="88" class="caption2"> {{ parseInt(item.progress) }}%</text>
						<text index="89" class="caption3">完成率</text>
					</view>
				</view>
			</view>
			<view class="w-full px-4 mb-6 box-border" v-if="classBookRateList.length > 0">
				<view class="w-full flex justify-between items-center">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<text class="text-[#474747] text-[28rpx] ml-2 font-bold">推荐书籍阅读情况</text>
					</view>
					<view class="items-back" @tap="toUrl('/pages-book/index')">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class-right.png'"></image>
					</view>
				</view>

				<view class="gridBox">
					<view
						index="62"
						class="colItem1"
						v-for="(item, index) in classBookRateList"
						@tap="toUrl('/pages-book/details/index?id=' + item.book_id)"
					>
						<view class="itemWrapper">
							<image index="61" :src="item.cover_img" class="item" />
							<view index="60" class="view1">
								<text index="57" class="title11">{{ parseInt(item.complete_rate) }}%</text>
								<text index="58" class="title12">完成率</text>
							</view>
						</view>
						<text index="59" class="address font-bold">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="w-full px-4 mb-6 box-border" v-if="studentRateList.length > 0">
				<view class="w-full flex justify-between items-center">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<text class="text-[#474747] text-[28rpx] ml-2 font-bold">近期活跃学生</text>
					</view>
					<view class="items-back" @tap="toRoster">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class-right.png'"></image>
					</view>
				</view>
				<view class="flex items-center mt-[30rpx] class-item-wrap">
					<uv-scroll-list :indicator="false" :style="{ width: '100%' }">
						<view index="40" class="colItem01" v-for="(item, index) in studentRateList">
							<image index="39" :src="item.avatar" class="image" />
							<text index="38" class="caption10 font-bold">{{ item.username }}</text>
							<text index="37" class="caption11 font-bold"
								>累计积分<text style="color: #34a4e2">{{ item.integral }}</text></text
							>
						</view>
					</uv-scroll-list>
				</view>
			</view>

			<view class="w-full px-4 mb-6 box-border" v-if="classMessageList.length > 0">
				<view class="w-full flex justify-between items-center">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<text class="text-[#474747] text-[28rpx] ml-2 font-bold">班级动态</text>
					</view>
					<view class="items-back" @tap="toUrl('/pages/class/dynamic/index')">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class-right.png'"></image>
					</view>
				</view>

				<view
					class="rounded-[30rpx] mt-3 px-3 py-3 w-full box-border flex justify-between flex-col active-item"
					v-for="(item, index) in classMessageList"
				>
					<view class="text-[26rpx] text-[#303030]" v-if="item.model == 5"
						>我已经读完了<text
							class="text-[#34A4E2]"
							@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
						>
							《{{ item.remark }}》</text
						>
						，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
						>积分，你也来试试吧！</view
					>
					<view class="text-[26rpx] text-[#303030]" v-else-if="item.model == 6"
						>我已经读完了<text
							class="text-[#34A4E2]"
							@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
							>倍阅读共读计划： {{ item.remark }}</text
						>，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
						>积分，你也来试试吧！</view
					>
					<view class="text-[26rpx] text-[#303030]" v-else
						>我已经读完了<text
							class="text-[#34A4E2]"
							@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
							>班级共读计划：{{ item.remark }}</text
						>，获得了<text class="text-[#FFA530]">{{ item.integral }}</text
						>积分，你也来试试吧！</view
					>
					<!-- <view class="text-[26rpx] text-[#303030]">{{ item.message }}</view> -->
					<view class="w-full flex justify-between items-center mt-4">
						<view class="flex items-center">
							<image
								:src="
									item.avatar ||
									'https://breadbook.oss-cn-hangzhou.aliyuncs.com/static/student4.png'
								"
								class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 border-solid border-[#f1f1f1]"
							></image>
							<text class="text-[28rpx] text-[#303030] ml-2">{{ item.student_name }}</text>
						</view>
						<text class="text-[25rpx] text-[#919191]">{{ item.created_at }}</text>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view
				class="w-full h-[100vh] box-border flex justify-center items-center flex-col"
				:style="{ paddingTop: barAlbright + 'rpx', marginTop: '-' + barAlbright + 'rpx' }"
			>
				<image :src="baseImg + '/class-login.png'" class="w-[352rpx] h-[317rpx]"></image>
				<view class="w-full flex justify-center items-center flex-col mt-8">
					<text class="text-[#474747] text-[32rpx]">还没有加入班级</text>
					<text class="text-[28rpx] text-[#ABABAB] mt-2">加入班级后才能参与班级共读计划</text>
				</view>
				<view class="w-full grid grid-cols-2 gap-x-4">
					<view
						class="mt-4 ml-8 w-[281rpx] rounded-[50rpx] h-[101rpx] flex justify-center items-center text-[#fff] text-[32rpx] class-BtnLs"
						@tap="toUrl('/pages/class/join/index')"
						>加入班级</view
					>
					<view
						class="mt-4 w-[281rpx] rounded-[50rpx] h-[101rpx] flex justify-center items-center text-[#fff] text-[32rpx] class-login-btn"
						@tap="toUrl('/pages/class/add/index')"
						>创建班级</view
					>
				</view>
			</view>
		</block>

		<!-- 添加班级 -->
		<uni-popup ref="popup" type="bottom">
			<view class="w-full h-[45vh] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
							@tap="closeSpecs"
						></image>
						<text class="text-[#303030] text-[44rpx]">增加班级</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #fff"
						></view>
					</view>
					<view class="w-full" style="height: calc(100% - 53rpx)">
						<view
							@tap="toUrl('/pages/class/add/index')"
							class="w-[calc(100% - 39rpx)] float-left text-[#fff] text-[30rpx] text-center h-[80rpx]"
							style="
								width: calc(100% - 78rpx);
								margin-top: 80rpx;
								margin-left: 39rpx;
								line-height: 80rpx;
								background: #ffd032;
								border-radius: 80rpx;
							"
							>创建班级</view
						>
						<view
							@tap="toUrl('/pages/class/join/index')"
							class="w-[calc(100% - 39rpx)] float-left text-[#fff] text-[30rpx] text-center h-[80rpx]"
							style="
								width: calc(100% - 78rpx);
								margin-top: 40rpx;
								margin-left: 39rpx;
								line-height: 80rpx;
								background: #2ba5e0;
								border-radius: 80rpx;
							"
							>加入班级</view
						>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 修改班级 -->
		<uni-popup ref="popup1" type="bottom">
			<view class="w-full h-[60vh] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
							@tap="closeSpecs1"
						></image>
						<text class="text-[#303030] text-[44rpx]">修改班级名称</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="editClass"
							>确认</view
						>
					</view>
					<view class="w-full" style="height: calc(100% - 53rpx)">
						<view class="w-full mt-[80rpx] text-center text-[30rpx] text-[#919191]"
							>原名:{{ currentClassNum.class_name }}
						</view>
						<view class="w-full">
							<input
								class="w-[calc(100% - 39rpx)] float-left text-[#303030] text-[30rpx] text-center h-[80rpx]"
								v-model="newClassName"
								style="
									width: calc(100% - 180rpx);
									margin-top: 40rpx;
									margin-left: 90rpx;
									line-height: 80rpx;
									border: #000 1px solid;
									border-radius: 80rpx;
								"
								@input="textChange"
							/>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import auth from '@/utils/auth';
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';
import {
	editClassApi,
	getClassBookRateApi,
	getClassInfoApi,
	getClassMessageApi,
	getStudentRateApi,
} from '@/service/class';
import dayjs from 'dayjs';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const toLink = url => {
	if (!url) return;
	uni.navigateTo({
		url,
	});
};

const toUrl = (url: string) => {
	console.log('========>url', url);
	if (!url) return;
	closeSpecs1();
	closeSpecs();
	if (!auth.getLoginStatus()) toAuthPage();

	uni.navigateTo({ url });
};
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const popup = ref(null);
const showAddPopup = ref(false);
function openSpecs() {
	popup.value.open();
}

function closeSpecs() {
	popup.value.close();
}
const popup1 = ref(null);
function openSpecs1() {
	currentClassNum.value.class_id =
		userInfo.value.class_list[currentClassNum.value.currindex].class_id;
	currentClassNum.value.class_name =
		userInfo.value.class_list[currentClassNum.value.currindex].class_name;
	popup1.value.open();
}
function closeSpecs1() {
	popup1.value.close();
	newClassName.value = '';
}
const studentRateList = ref([]);
const getStudentRateList = async (class_id: number, num: number) => {
	try {
		const res = await getStudentRateApi(class_id, num);
		if (res.status_code === 200) {
			const resData: any = res.data;
			studentRateList.value = resData;
			//console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};
const classBookRateList = ref([]);
const getClassBookRateList = async (class_id: number, num: number) => {
	try {
		const res = await getClassBookRateApi(class_id, num);
		if (res.status_code === 200) {
			const resData: any = res.data;
			classBookRateList.value = resData;
			//console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};
const gradeClass = ref('一年级');
const classInfo: any = ref();
const getClassInfo = async (class_id: number) => {
	try {
		const res = await getClassInfoApi(class_id);
		if (res.status_code === 200) {
			const resData: any = res.data;
			classInfo.value = resData;
			//console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};
const currentClassNum = ref({
	currindex: 0,
	class_id: 0,
	class_name: '',
});
const setCurrentClassNum = () => {
	currentClassNum.value.currindex = 0;
	currentClassNum.value.class_id =
		userInfo.value.class_list.length > 0 ? userInfo.value.class_list[0].class_id : 0;
	currentClassNum.value.class_name =
		userInfo.value.class_list.length > 0 ? userInfo.value.class_list[0].class_name : '';
};
const classChange = (event: any) => {
	console.log('========>event', event);
	let num = event.detail.current;
	// let arrayFromObj = Object.entries(pantFormPlanList.value).map(([key, value]) => ({ key, value }));
	gradeClass.value = userInfo.value.class_list[num].class_name;
	currentClassNum.value.class_id = userInfo.value.class_list[num].class_id;
	currentClassNum.value.class_name = userInfo.value.class_list[num].class_name;
	currentClassNum.value.currindex = num;

	getClassInfo(userInfo.value.class_list[num].class_id);
	getClassBookRateList(userInfo.value.class_list[num].class_id, 10);
	getStudentRateList(userInfo.value.class_list[num].class_id, 10);
	getClassMessageList(1, userInfo.value.class_list[num].class_id);
};

const classMessageList = ref([]);
const getClassMessageList = async (page: number, id: number) => {
	try {
		const res = await getClassMessageApi(page, id);
		if (res.status_code === 200) {
			const resData: any = res.data;
			classMessageList.value = resData.list.slice(0, 3);
			//console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};

//
useChangeTabbar(1);

const toRoster = () => {
	uni.navigateTo({
		url: `/pages/class/roster/index?class_id=${currentClassNum.value.class_id}`,
	});
};

const newClassName = ref('');
const textChange = (event: any) => {
	newClassName.value = event.detail.value;
};
const editClass = async () => {
	try {
		const res = await editClassApi(currentClassNum.value.class_id, newClassName.value);
		if (res.status_code === 200) {
			uni.showToast({
				title: '修改成功',
				icon: 'none',
			});
			currentClassNum.value.class_name = newClassName.value;
			userInfo.value.class_list[currentClassNum.value.currindex].class_name = newClassName.value;
			closeSpecs1();
			newClassName.value = '';
		} else {
			uni.showToast({
				title: res.message || '修改失败',
				icon: 'none',
			});
		}
	} catch (error) {
		console.log('========>editClasserror', error);
		uni.hideLoading();
		uni.showToast({
			title: error.data.message || '修改失败',
			icon: 'none',
		});
	}
};

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	setCurrentClassNum();

	auth
		.getUserInfoByToken()
		.then((res: any) => {
			console.log('=======>userInfo', userInfo.value);
			if (res.class_list.length == 0) {
				showAddPopup.value = true;
			} else {
				showAddPopup.value = false;
				getClassInfo(userInfo.value.class_list[currentClassNum.value.currindex].class_id);
				getClassBookRateList(
					userInfo.value.class_list[currentClassNum.value.currindex].class_id,
					10,
				);
				getStudentRateList(userInfo.value.class_list[currentClassNum.value.currindex].class_id, 10);
				getClassMessageList(1, userInfo.value.class_list[currentClassNum.value.currindex].class_id);
			}
		})
		.catch(error => {
			showAddPopup.value = true;
			uni.showToast({
				title: error.data.message || '获取失败',
				icon: 'none',
			});
		});
});
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.wx-swiper-dots .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #c6c6c8;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 40rpx !important;
	height: 10rpx !important;
	border-radius: 10rpx !important;
	background: #909192 !important;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.class-topBox {
	position: relative;
	z-index: 1;
	margin: 150rpx 0 40rpx;
}

.class_swiperBox {
	background-color: rgb(255 255 255 / 100%);
	border-radius: 20rpx;
	box-shadow:
		0 0 4px 0 rgb(0 0 0 / 3%),
		0 7px 30px 0 rgb(0 0 0 / 7%);
}

.class-touxiang {
	width: 100rpx;
	height: 100rpx;
	margin-right: 10rpx;
	border: 4px solid #f7ce32;
	border-radius: 50%;
}

.class-student {
	width: 47rpx;
	height: 47rpx;
	margin-right: 10rpx;
	background: #c3c3c3;
	border-radius: 50%;
}

.student-process {
	height: 66rpx;
	background-color: rgb(243 243 245 / 80%);
	border-radius: 30rpx;
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.items-tips {
	background: #f3f3f5;
	border-radius: 30rpx;
}

.items-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 63rpx;
	height: 63rpx;
	background: #f3f3f5;
	border-radius: 50rpx;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.active-item {
	background-color: #f9f9fb;
}

.class-login-btn {
	background: #f4c421;
}

.class-BtnLs {
	background: #2ba5e0;
}

.container2 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: center;
	width: 662rpx;
	padding: 29rpx 12rpx 40rpx;
	margin: 29rpx 5rpx 0 0;
	background-color: rgb(255 255 255 / 100%);
	border-radius: 45rpx;
	box-shadow: 0 7rpx 30rpx 0 rgb(0 0 0 / 7%);
}

.wrapper1 {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	justify-content: flex-start;
	width: 500rpx;
	overflow: hidden;
}

.title2 {
	align-self: left;
	margin-left: 10rpx;
	font-size: 30rpx;
	font-style: normal;
	line-height: 50rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: calc(100% - 10rpx);
}

.group1 {
	display: flex;
	flex-direction: row;
	align-self: left;
	justify-content: flex-start;
	width: 500rpx;
}

.captionWrapper {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	justify-content: center;
	width: 100rpx;
	padding: 6rpx 12rpx;
	margin-top: 10rpx;
	background-color: rgb(43 165 223 / 100%);
	border-radius: 10rpx;
}

.captionWrapper1 {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	justify-content: center;
	width: 100rpx;
	padding: 6rpx 12rpx;
	margin-top: 10rpx;
	background-color: #f4c421;
	border-radius: 10rpx;
}

.caption {
	align-self: flex-start;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 30rpx;
	color: rgb(255 255 255 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption1 {
	align-self: flex-start;
	margin-left: 12rpx;
	font-size: 23rpx;
	font-style: normal;
	line-height: 60rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.title3 {
	align-self: flex-start;
	max-width: 180rpx;
	margin: 72rpx 0 0 2rpx;
	overflow: hidden;
	font-size: 36rpx;
	font-style: normal;
	line-height: 78rpx;
	color: rgb(51 163 225 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: pre;
}

.wrapper2 {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	justify-content: flex-start;
	width: 120rpx;
	height: 120rpx;
	padding: 0;
	margin: 0 0 20rpx 20rpx;
	overflow: hidden;
	background-color: #2ba5df;
	border-radius: 120rpx;
}

.caption2 {
	align-self: center;
	max-width: 147rpx;
	margin-top: 14rpx;
	overflow: hidden;
	font-size: 28rpx;
	font-style: normal;
	line-height: 40rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.caption3 {
	align-self: center;
	max-width: 157rpx;
	margin: 0 0 0 1rpx;
	overflow: hidden;
	font-size: 30rpx;
	font-style: normal;
	line-height: 36rpx;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title7 {
	align-self: center;
	font-size: 30rpx;
	font-style: normal;
	line-height: 60rpx;
	color: rgb(51 163 225 / 100%);
	text-align: left;
	text-decoration: none;
	letter-spacing: -0.72rpx;
	white-space: pre;
}

.row1 {
	float: left;
	width: 710rpx;
}

.colItem01 {
	float: left;
	width: 200rpx;
	padding: 25rpx 12rpx 23.5rpx;
	margin: 30rpx 20rpx 44rpx 0;
	background-color: #fff;
	border-radius: 45rpx;
	box-shadow: 0 7rpx 30rpx rgb(0 0 0 / 7%);
}

.image {
	margin: 0 calc((100% - 140rpx) / 2);
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	float: left;
}

.caption10 {
	float: left;
	text-align: center;
	width: 100%;
	margin: 23rpx 0 0 1rpx;
	overflow: hidden;
	font-size: 25rpx;
	font-style: normal;
	line-height: 25rpx;
	color: rgb(48 48 48 / 100%);
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.68rpx;
	white-space: nowrap;
}

.caption11 {
	float: left;
	text-align: center;
	width: 100%;
	margin: 17.5rpx 0 0 1rpx;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 22rpx;
	color: rgb(48 48 48 / 100%);
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.6rpx;
	white-space: nowrap;
}

.gridBox {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 710rpx;
	margin-top: 29rpx;
}

.colItem1 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 215rpx;
	height: 285rpx;
	padding: 32rpx 12rpx 24.5rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 7rpx 30rpx rgb(0 0 0 / 7%);
}

.itemWrapper {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 210rpx;
}

.item {
	align-self: flex-start;
	width: 208rpx;
	height: 240rpx;
	border-radius: 20rpx;
	margin-left: 1rpx;
}

.view1 {
	position: absolute;
	bottom: 60rpx;
	left: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 120rpx;
	height: 120rpx;
	padding: 0;
	background-color: rgb(43 165 223 / 90%);
	border-radius: 120rpx;
	transform: translate(-50%);
}

.title11 {
	align-self: flex-start;
	width: 120rpx;
	margin-top: 20rpx;
	overflow: hidden;
	font-size: 30rpx;
	font-style: normal;
	line-height: 42rpx;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title12 {
	align-self: center;
	width: 120rpx;
	margin: 0 0 0 1rpx;
	overflow: hidden;
	font-size: 28rpx;
	font-style: normal;
	line-height: 32rpx;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.address {
	align-self: center;
	max-width: 241rpx;
	margin: 15.5rpx 0 0 3rpx;
	overflow: hidden;
	font-size: 25rpx;
	font-style: normal;
	line-height: 32rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: -0.68rpx;
	white-space: nowrap;
}

.class_tabBox {
	position: absolute;
	top: -100rpx;
	left: 32rpx;
	z-index: 2;
	width: 686rpx;
	height: 100rpx;
	overflow: hidden;
}

.class_tabBox_a {
	float: left;
	width: auto;
	height: 80rpx;
	padding: 0 20rpx;
	margin-top: 20rpx;
	line-height: 80rpx;
	color: #ababab;
	background-color: #e7e8ea;
	border-top-right-radius: 20rpx;
}

.class_tabBox_aHov {
	float: left;
	width: auto;
	height: 100rpx;
	padding: 20rpx 20rpx 0;
	margin-top: 0;
	line-height: 80rpx;
	color: #474747;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	box-shadow:
		0 0 4px rgb(0 0 0 / 3%),
		0 7px 30px rgb(0 0 0 / 7%);
}

.class_rightBox {
	float: right;
	width: auto;
	height: 80rpx;
	padding: 0 30rpx;
	margin-top: 20rpx;
	margin-right: 50rpx;
	background-color: #e7e8ea;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}

.class_rightBox image {
	float: left;
	width: 34rpx;
	height: 34rpx;
	margin-top: 23rpx;
	margin-right: 10rpx;
}

.class_rightBox text {
	float: left;
	font-size: 30rpx;
	line-height: 80rpx;
	color: #ababab;
}
.class-item-wrap {
	:deep(.uv-scroll-list) {
		width: 100%;
	}
	.overlayer {
		margin-right: 10rpx;
		word-break: keep-all;
	}
}
</style>
